@model DisplayDeploymentPlanViewModel
@inject IDeploymentManager DeploymentTargetManager
@using OrchardCore.Deployment.Services
@using Microsoft.AspNetCore.Routing

<h1>@RenderTitleSegments(T["Deployment Plan"])</h1>

<nav class="admin-toolbar">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <div class="btn-group">
                <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#modalTargets">
                    @T["Execute"]
                </button>
            </div>
        </li>
    </ul>
    <ul class="navbar-nav">
        <li class="nav-item">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalSteps">
                @T["Add Step"]
            </button>
        </li>
    </ul>
</nav>

<form asp-action="DeploymentPlan">
    @if (Model.Items.Any())
    {
        <ul class="list-group">
            @foreach (var item in Model.Items)
            {
                item.DeploymentPlanId = Model.DeploymentPlan.Id;

                <li class="list-group-item">
                    @await DisplayAsync(item)
                </li>
            }
        </ul>
    }
    else
    {
        <div class="alert alert-info" role="alert">
            @T["<strong>Nothing here!</strong> There are no steps on this plan for the moment."]
        </div>
    }
</form>

<!-- Modal -->
<div class="modal fade" id="modalSteps" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@T["Available Steps"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="card-columns">
                    @foreach (var thumbnail in Model.Thumbnails)
                    {
                        thumbnail.Value.DeploymentPlan = Model.DeploymentPlan;
                        thumbnail.Value.Type = thumbnail.Key;
                        @await DisplayAsync(thumbnail.Value)
                    }
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">@T["Cancel"]</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalTargets" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@T["Available Targets"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="card-columns">
                    @foreach (var target in await DeploymentTargetManager.GetDeploymentTargetsAsync())
                    {
                        var routeWithId = new RouteValueDictionary(target.Route);
                        routeWithId["id"] = Model.DeploymentPlan.Id;

                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">@target.Name</h4>
                                <p>@target.Description</p>
                            </div>
                            <div class="card-footer text-muted text-xs-right">
                                <a class="btn btn-primary btn-sm" href="@Url.RouteUrl(routeWithId)" itemprop="UnsafeUrl">@T["Select"]</a>
                            </div>
                        </div>
                    }
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">@T["Cancel"]</button>
            </div>
        </div>
    </div>
</div>